@import "./../less/mixin";
@import "reset";
@import "./iconfont/iconfont.css";

html,body{
  color: #202124;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  .custom-scrollbar;
}

#app{
  height: 100%;
}

.custom-style{
  // elementUI 样式覆盖
  .el-select{
    vertical-align: middle;
  }
  .el-select>.el-input{
    font-size: 0;
  }
  .el-input--mini .el-input__inner{
    font-size: 12px;
    height: 28px;
    line-height: 28px;
  }

  .el-date-editor.el-input{
    font-size: 0;
    .el-input__prefix{
      font-size: 12px;
    }
    .el-input__suffix{
      font-size: 12px;
    }
    .el-input__inner{
      font-size: 12px;
    }
  }

  .el-date-editor .el-range-separator{
    padding: 0;
  }

  .el-range-editor{
    vertical-align: middle;
  }

  .el-form-item__label{
    font-size: 12px;
    color: #202124;
  }
  .el-form-item__content{
    font-size: 12px;
    .el-button{
      vertical-align: middle;
    }
  }

  .el-table{
    border-radius: 6px;
  }
  .el-table thead th{
    background: #E2EEFF;
    border-color: #ffffff;
    font-size: 12px;
    color: #202124;
    padding: 6px 0;
    >.cell{
      line-height: 18px;
    }
  }
  .el-table td{
    font-size: 12px;
    color: #202124;
    padding: 6px 0;
  }
  .el-table thead tr:last-child th{
    color: #6B6B6B;
  }
  .el-table--border{
    border-color: #F1F6F8;
  }
  .el-table--border td, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
    border-color: #F1F6F8;
  }
  .el-table td .cell{
    line-height: 23px;
  }
  .el-table__body-wrapper{
    .custom-scrollbar;
  }
  .el-table__fixed-right{
    bottom: 8px !important;
    height: unset !important;
    border-radius: 0 8px 0 0;
    &:before{
      display: none;
    }
  }
  .el-table--scrollable-y .el-table__fixed-right{
    right: 8px !important;
  }
  .el-table__fixed-right-patch{
    width: 8px !important;
    background-color: #e2eeff;
  }
  .el-table--scrollable-y .el-table__fixed-right{
    border-radius: 0;
  }
  .el-table .el-table__fixed-header-wrapper thead th:last-child{
    border-right-color: transparent;
  }

  .el-dialog{
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .el-dialog__header{
    padding: 22px 25px 10px 25px;
    height: 56px;
    line-height: 24px;
    font-size: 18px;
    font-weight: bold;
    color: #202124;
  }
  .el-dialog__headerbtn{
    right: 24px;
    right: 24px;
    top: 22px;
    text-shadow: 0 0 1px #000000;
    .el-dialog__close{
      font-size: 20px;
      color: #202124;
    }
  }
  .el-dialog__body{
    padding: 5px 25px 25px 25px;
  }
  .el-dialog__wrapper{
    overflow: hidden;
  }

  // vxe 样式覆盖
  .vxe-table{
    .vxe-table--border-line{
      border-color: #F1F6F8;
      border-radius: 6px;
    }
    .vxe-table--header-border-line{
      display: none;
    }
    .vxe-header--column{
      height: 32px;
      padding: 3px 5px;
      background-color: #E2EEFF;
      background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#FFFFFF, #FFFFFF);
      background-repeat: no-repeat;
      background-size: 1px 100%, 100% 1px;
      background-position: 100% 0, 100% 100%;
      .vxe-cell{
        font-size: 0;
      }
      .vxe-cell--title{
        font-size: 12px;
        color: #202124;
        font-weight: normal;
        line-height: 1;
        white-space: nowrap;
      }
    }
    &.border--full .vxe-table--header-wrapper .vxe-header--row .vxe-header--gutter{
      display: none;
    }
    &.border--full .vxe-table--header-wrapper .vxe-header--row:last-child .vxe-header--gutter{
      background-color: #E2EEFF;
      background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#FFFFFF, #FFFFFF);
      background-repeat: no-repeat;
      background-size: 0 100%, 100% 1px;
      background-position: 100% 0, 100% 100%;
      display: table-cell;
    }
    .vxe-body--column{
      height: 36px;
      padding: 3px 0;
      background-color: #ffffff;
      background-image: linear-gradient(#F1F6F8, #F1F6F8), linear-gradient(#F1F6F8, #F1F6F8);
      .vxe-cell{
        font-size: 12px;
        color: #202124;
        font-weight: normal;
        padding: 0 8px;
      }
    }
    .vxe-footer--column{
      height: 36px;
      padding: 3px 0;
      background-color: #ffffff;
      background-image: linear-gradient(#F1F6F8, #F1F6F8), linear-gradient(#F1F6F8, #F1F6F8);
      .vxe-cell{
        font-size: 12px;
        color: #202124;
        font-weight: normal;
        padding: 0 8px;
      }
    }
    .fixed-left--wrapper{
      .vxe-body--column:last-child{
        background-size: 1px 100%, 100% 1px;
      }
      .vxe-footer--column:last-child{
        background-size: 1px 100%, 100% 1px;
      }
    }
    .vxe-table--header-wrapper, .vxe-table--body-wrapper, .vxe-table--footer-wrapper{
      background: #fdfdfd;
    }
    .vxe-table--header-wrapper{
      border-radius: 6px 6px 0 0;
      background-color: #E2EEFF;
      &:after{
        content: '';
        height: 1px;
        background-color: #ffffff;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
    .vxe-table--body-wrapper, .vxe-table--footer-wrapper{
      border-radius: 0 0 6px 6px;
    }
    .fixed-left--wrapper{
      background: transparent;
    }
    .vxe-table--fixed-left-wrapper, .vxe-table--fixed-right-wrapper{
      background: transparent;
      border-color: #F1F6F8;
    }
    .vxe-table--body-wrapper{
      // 滚动条样式
      .custom-scrollbar;
    }
    .vxe-table--footer-wrapper{
      border-top-color: #ffffff;
      // 滚动条样式
      .custom-scrollbar;
    }
    .vxe-body--row{
      background: #ffffff;
      color: #ffffff;
      &.row--stripe{
        background: #ffffff;
      }
    }
    .vxe-footer--row{
      background: #ffffff;
    }

    .vxe-table--empty-content{
      font-size: 12px;
      color: #aaaaaa;
      line-height: 100px;
    }

    .vxe-body--row.row-orange .vxe-body--column{
      background-color: #fff9f9;
    }
    .vxe-body--row.row-green .vxe-body--column{
      background-color: #f9fff9;
    }
    .vxe-body--row.row-light .vxe-body--column{
      background-color: #fbfbfb;
    }
    .vxe-body--row.row-blue-text .vxe-body--column .vxe-cell{
      color: #2F67D7;
      font-weight: bold;
    }

    .vxe-cell--sort {
      width: 12px;
      height: 12px;
      font-size: 12px;
      vertical-align: middle;
    }
    .vxe-sort--asc-btn, .vxe-sort--desc-btn{
      width: 12px;
    }
    .vxe-sort--asc-btn{
      top: -2px;
    }
    .vxe-sort--desc-btn{
      bottom: -4px;
    }
    .vxe-sort--asc-btn.sort--active, .vxe-sort--desc-btn.sort--active {
      color: #2F67D7;
    }

    // 无边框样式
    &.vxe-table-no-border{
      .vxe-body--column{
        background-image: none;
      }
      .vxe-footer--column{
        background-image: none;
      }
      .vxe-body--row.row-light .vxe-body--column{
        background-color: #F2F2F2;
      }
    }

    .el-input{
      font-size: 0;
      vertical-align: top;
      margin-bottom: 2px;
    }
    .el-input__inner{
      padding: 0 5px;
      font-size: 12px;
      text-align: center;
    }

    .el-button--mini{
      padding: 4px 10px;
      vertical-align: top;
    }
    .el-button--mini+.el-button--mini{
      margin-left: 6px;
    }
  }

  .vxe-modal--box{
    border-radius: 8px;
    border: none;
    .vxe-modal--header{
      border-radius: 8px 8px 0 0;
      background-color: #ffffff;
      border-bottom: none;
      padding: 22px 25px 10px 25px;
      height: 56px;
      line-height: 24px;
      font-size: 18px;
      font-weight: bold;
      color: #202124;
    }
    .vxe-modal--close-btn{
      right: 24px;
      top: 22px;
      &:hover{
        color: #2F67D7;
      }
    }
    .vxe-modal--body{
      padding: 5px 25px 25px 25px;
      display: block;
      overflow: unset;
      .vxe-modal--content{
        overflow: unset;
        padding: 0;
      }
    }
  }
  .vxe-modal--wrapper.is--maximize{
    width: unset;
    height: 100%;
    right: 8px;
    overflow: hidden;
    padding-right: 0;
    &:before{
      background-color: #F1F6F8;
    }
    .vxe-modal--box{
      width: unset !important;
      height: unset !important;
      box-shadow: none;
      top: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 8px !important;
      .vxe-modal--body{
        display: flex;
      }
    }
  }
}

[v-cloak]{
  display: none !important;
}

.cm-page-wrap{
  height: 100%;
  margin-right: 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  .custom-scrollbar;

  &.cm-page-wrap-no-scroll{
    margin-right: 0;
    overflow-y: hidden;
  }
}
.cm-card{
  background-color: #ffffff;
  border-radius: 8px;
  padding: 8px;
}
.cm-card-no-padding{
  padding: 0;
}
.cm-card-for-form{
  padding: 8px 8px 0 8px;
  .el-form-item{
    margin-right: 16px;
    margin-bottom: 8px;
  }
  .el-form-item__label{
    padding-right: 8px;
  }
}
.cm-card-title{
  height: 32px;
  line-height: 28px;
  padding: 0 8px 4px 8px;
  font-size: 14px;
  font-weight: bold;
  color: #202124;
}
.cm-card-content{
  padding: 4px 8px 8px 8px;
}
.cm-pagination-wrap{
  margin-top: 10px;
  text-align: right;
  .el-input{
    vertical-align: top;
  }
  .el-input .el-input__inner{
    height: 28px;
  }
}

.cm-text-blue{
  color: #2F67D7;
}
.cm-text-red{
  color: #F36D6C;
}
.cm-text-green{
  color: #00CEA3;
}
.cm-text-dark{
  color: #6B6B6B;
}
.cm-text-light{
  color: #888888;
}
.cm-text-lighter{
  color: #b8b8b8;
}

.cm-btn-blue{
  height: 28px;
  line-height: 27px;
  padding: 0 12px;
  border: none;
  background: #E2EEFF;
  color: #2F67D7;
  font-size: 12px;
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
  &:hover{
    background: #D3E2F7;
  }
  &:disabled{
    color: #cecece;
    cursor: not-allowed;
    background-color: #F1F6F8;
    &:hover{
      background-color: #F1F6F8;
    }
  }
}
